/**
 * 可报考科目名单
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/studentPage/stuSignup' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>考生报名</el-breadcrumb-item>
    </el-breadcrumb>
    <!--搜索框-->
     <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.majorName" placeholder="请输入报考专业名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
       <el-form-item>
        <el-upload  ref="upload" class="upload-demo" action="http://127.0.0.1/EXAM/pictureUpload/" :headers = "Myheaders" :on-success="handleSuccess" :on-error="handleError" :auto-upload="true">
           <el-button slot="trigger" size="small" type="primary" icon="el-icon-s-order">上传一寸考生照片</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column  sortable prop="eid" label="考试编号" width="100">
      </el-table-column>
      <el-table-column sortable prop="eName" label="考试名称" width="150">
      </el-table-column>
      <el-table-column sortable prop="eSessions" label="考试场次" width="150">
      </el-table-column>
      <el-table-column sortable prop="eLocName" label="考试地点" width="150">
      </el-table-column>
      <el-table-column sortable prop="course" label="报考专业" width="250">
      </el-table-column>
      <el-table-column sortable prop="eSignStartAndEnd" label="报名开始结束时间" width="300">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.eSignStartAndEnd }}</span>
      </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="signUp(scope.$index, scope.row)">报名</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination :child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="102px" :model="stuForm" >
        <el-form-item label="姓名" prop="sName">
          <el-input size="small" v-model="stuForm.sName" auto-complete="off" placeholder="请输入您的姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sSex">
          <el-select v-model="stuForm.sSex" placeholder="请选择您的性别">
           <el-option
             v-for="item in options"
             :key="item.value"
             :label="item.label"
             :value="item.value">
           </el-option>
           </el-select>
        </el-form-item>
         <el-form-item label="所属学校" prop="sSchool">
          <el-input size="small" v-model="stuForm.sSchool" auto-complete="off" placeholder="请输入您的学校"></el-input>
        </el-form-item>
        <el-form-item label="院系" prop="sCollege">
          <el-input size="small" v-model="stuForm.sCollege" auto-complete="off" placeholder="请输入您的院系"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="sSubject">
          <el-input size="small" v-model="stuForm.sSubject" auto-complete="off" placeholder="请输入您的专业"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="sClass">
          <el-input size="small" v-model="stuForm.sClass" auto-complete="off" placeholder="请输入您的班级"></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="sStudentNo">
          <el-input size="small" v-model="stuForm.sStudentNo" auto-complete="off" placeholder="请输入您的学号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" @click="submitStuInfo()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTestTitle, signUpExam, completeInfo } from '../../api/userOpe'
import Pagination from '../../components/Pagination'
export default {
  data () {
    return {
      loading: true, // 是显示加载
      editFormVisible: false, // 控制编辑页面显示与隐藏
      title: '完善个人信息',

      // 上传携带 token
      Myheaders: {
        USERTOKEN: sessionStorage.getItem('token')
      },

      // 是否上传照片
      hasUpload: false,

      // 完善个人信息数据表单
      stuForm: {
        sName: '',
        sSex: '',
        sSchool: '',
        sCollege: '',
        sSubject: '',
        sClass: '',
        sStudentNo: '',
        eno: ''
      },

      // 考试性别选择
      options: [{
        value: 1,
        label: '男'
      }, {
        value: 0,
        label: '女'
      }],

      // 存放重复使用的考试数据
      examForm: {
        eLocName: '',
        eName: '',
        eSessions: '',
        eSignStartAndEnd: '',
        eStatus: '',
        eid: ''
      },

      // 表单动态数据存储
      formInline: {
        page: 1,
        limit: 15,
        majorName: ''
      },

      listData: [], // 当前显示的数据
      resultList: [], // 已经处理好的数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 15,
        total: 0
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 创建完毕
   */
  created () {
    this.getData()
  },

  methods: {
    // 获取可报名专业菜单
    getData () {
      getTestTitle().then(res => {
        if (res.message === 'err') {
          this.$message.warning('当前没有正在进行的考试')
          this.loading = false
        } else {
          // console.log(res.data.startExamInfo)
          // console.log(res.data.startExamInfo.length)
          const data = res.data.startExamInfo

          // 数据处理
          this.dataTreat(data)

          // 数据切割
          this.cutData()

          this.pageparm.total = this.resultList.length
          // console.log(this.pageparm.total)
          this.loading = false
        }
      }).catch((e) => {
        this.$message.error('数据获取失败！')
      })
    },

    // 后台复杂数据处理，数据整合，符合渲染要求
    dataTreat (data) {
      // console.log(data, data.length)
      for (let i = 0; i < data.length; i++) {
        // console.log(data[i].course)
        let temp = [] // 临时存储
        temp = data[i].course
        this.examForm.eLocName = data[i].eLocName
        this.examForm.eName = data[i].eName
        this.examForm.eSessions = data[i].eSessions
        this.examForm.eSignStartAndEnd = data[i].eSignStartTime + ' ~ ' + data[i].eSignEndTime
        this.examForm.eStatus = data[i].eStatus
        this.examForm.eid = data[i].eid
        for (let j = 0; j < temp.length; j++) {
          temp[j].eDate = this.examForm.eDate
          temp[j].eLocName = this.examForm.eLocName
          temp[j].eName = this.examForm.eName
          temp[j].eSessions = this.examForm.eSessions
          temp[j].eSignStartAndEnd = this.examForm.eSignStartAndEnd
          temp[j].eStatus = this.examForm.eStatus
          temp[j].eid = this.examForm.eid
        }
        this.resultList = this.resultList.concat(temp)
      }
      // console.log(this.resultList)
    },
    // 数据切割 分页
    cutData () {
      this.listData = this.resultList.slice((this.formInline.page - 1) * this.formInline.limit, (this.formInline.page * this.formInline.limit))
    },
    // 分页插件事件
    callFather (parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.cutData()
    },
    // 报名操作
    signUp (index, row) {
      this.$confirm('您仅有一次报名机会，确定要报名吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        signUpExam(row).then(res => {
          this.stuForm.eno = res.data.eno

          if (this.hasUpload) {
            // console.log(this.stuForm)
            // console.log(res)
            if (res.data.info === '请完善个人信息') {
              // 检测是否是刚注册的用户，是否需要完成个人信息
              this.$confirm('请完善您的个人信息', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.editFormVisible = true
              }).catch(() => {
                this.$message({
                  type: 'error',
                  message: '报名失败，请重试'
                })
              })
            } else if (res.data.info === '报名成功') {
              this.$message.success('报名成功!')
            } else if (res.data.info === '请勿重复报名') {
              this.$message.error('请勿重复报名! ')
            } else if (res.data.info === '报名已结束') {
              this.$message.info('报名已结束')
            } else if (res.data.info === '报名异常,请稍后再试') {
              this.$message.warning('报名异常,请稍后再试')
            }
          } else {
            this.$message.warning('您未上传个人照片，请先去上传照片！')
          }
        }).catch((e) => {
          this.$message.error('请求异常！')
        })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消报名'
        })
      })
    },

    // 上传成功
    handleSuccess () {
      this.hasUpload = true
      this.$message.success('上传照片成功！')
    },

    // 上传失败
    handleError () {
      this.$message.error('上传照片失败！')
    },

    // 提交完善个人信息
    submitStuInfo () {
      completeInfo(this.stuForm).then(res => {
        if (res.code === 20000) {
          this.$message.success('完善个人信息成功，请再次点击报名')
          this.editFormVisible = false
        } else {
          this.$message.error('完善信息有误！请重试')
        }
      }).catch((e) => {
        this.$message.error('完善信息有误！请重试')
      })
    },
    // 搜索功能
    search () {
      this.listData = this.resultList.filter((item) => {
        return this.formInline.majorName === item.course
      })
    },
    // 关闭编辑、添加弹出框
    closeDialog () {
      this.editFormVisible = false
    }
  }
}
</script>

<style lang="stylus" scoped>
.user-search
  margin-top : 20px
.el-table, .el-table__expanded-cell
  opacity : 0.8
</style>
